<template>
    <div>
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 编辑商家资料 </span>
            </template>
        </el-page-header>
        <el-card shadow="never">
            <vxe-form :data="merchantForm.merchant" :items="formItems" titleColon @submit="submitEvent" @reset="resetEvent">
                <template #logoSlot="{ data }">
                    <hd-uploadSingleImage v-model="data.logo" />
                </template>
                <template #imageSlot="{ data }">
                    <hd-uploadMultImage :limit="3" ref="imgUploadRef" :fileSize="100" :isShowTip="false"
                        :fileList="data.images" @fresh="uploadImg" fileWidth="300px"
                        fileHeight="300px"></hd-uploadMultImage>
                </template>
                <template #videoSlot="{ data }">
                    <section v-if="data.videos">
                        <hd-uploadFile v-model="data.videos" :limit="3" :isShowTip="true"
                            @uploadSuccess="uploadSuccess"></hd-uploadFile>
                    </section>
                </template>
                <template #posterSlot="{ data }">
                    <hd-uploadMultImage :limit="3" ref="imgUploadRef" :fileSize="100" :isShowTip="false"
                        :fileList="data.posters" @fresh="uploadPos" fileWidth="300px"
                        fileHeight="300px"></hd-uploadMultImage>
                </template>
            </vxe-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { http } from '@/plugins/axios'

import router from '@/plugins/router'
const formItems = ref<VxeFormPropTypes.Items>([])
const cateOpts = ref([])
const getOpts = async () => {
    const data = await http.request({
        url: "category/list",
        method: "get"
    })

    cateOpts.value = data.map(item => {
        return {
            label: item.title,
            value: item.id
        }
    })
}
const storage = useStorage()
const headers = ref({
    "Authorization": `Bearer ${storage.get(CacheEnum.TOKEN_NAME)}`
})

// 定义一个action的计算属性
const uploadAction = computed(() => {
    return `${import.meta.env.VITE_API_BASE_URL}/api/upload`
})


const initFormItems = () => {
    formItems.value = [
        {
            title: '左侧',
            span: 12,
            children: [
                { field: 'id', title: 'id', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入id', disabled: true } } },
                // { field: 'category_id', title: '分类', span: 8, itemRender: { name: '$select', options: toRaw(cateOpts.value), props: { placeholder: '请选择分类' } } },
                {
                    field: 'category_id', title: '分类', span: 8, itemRender: {
                        name: '$select', options: cateOpts, props: { placeholder: '请选择分类' }
                    }
                },
                { field: 'name', title: '名称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
                { field: 'logo', title: 'logo', span: 24, itemRender: {}, slots: { default: 'logoSlot' } },
                { field: 'tel', title: '电话', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入电话' } } },
                { field: 'address', title: '地址', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入地址' } } },
                // 文本域设置默认行数
                {
                    field: 'description', title: '描述', span: 12, itemRender: {
                        name: '$textarea',
                        props: {
                            autosize: { minRows: 6, maxRows: 10 }
                        }
                    }
                },
                // switch,开的时候值为1表示启用，关的时候为0表示禁用
                { field: 'status', title: '状态', span: 24, itemRender: { name: '$switch', props: { openLabel: '是', closeLabel: '否', openValue: "1", closeValue: "0", } } },
                { field: 'business_hours', title: '营业时间', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入营业时间' } } },
                // 用户id不可编辑
                { field: 'user_id', title: '用户ID', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入用户ID', disabled: true } } },
                // { field: 'discount_id', title: '折扣ID', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入地址' } } },
                { field: 'views', title: '观看次数', span: 8, itemRender: { name: '$input', props: { type: "number", placeholder: '请输入地址' } } },
                { field: 'recommend', title: '推荐值', span: 8, itemRender: { name: '$input', props: { type: "number", placeholder: '请输入地址' } } },
                { field: 'posters', title: '展示图', span: 24, itemRender: {}, slots: { default: 'posterSlot' } },

            ]
        },
        {
            title: '左侧',
            span: 12,
            children: [
                { field: 'images', title: '图片', span: 24, itemRender: {}, slots: { default: 'imageSlot' } },
                { field: 'videos', title: '视频', span: 24, itemRender: {}, slots: { default: 'videoSlot' } },
            ]
        },
        {
            align: 'left',
            span: 24,
            itemRender: {
                name: '$buttons',
                children: [
                    { props: { type: 'submit', content: '提交', status: 'primary' } },
                    { props: { type: 'reset', content: '重置' } }
                ]
            }
        }
    ]
}
getOpts()
initFormItems()
const uploadImg = (val) => {
    merchantForm.merchant.images = val.map(item => {
        return item.response ? item.response.url : item.url
    })
    // merchantForm.merchant.images = val
}

const uploadPos = (val) => {
    merchantForm.merchant.posters = val.map(item => {
        return item.response ? item.response.url : item.url
    })
}
const id = router.currentRoute.value.params.id
onMounted(() => {
    show(id)
})
const merchantForm = reactive({
    merchant: {
        id: null,
        category_id: null,
        name: null,
        logo: null,
        tel: null,
        address: null,
        description: null,
        status: null,
        coordinates: null,
        business_hours: null,
        images: null,
        videos: [],
        posters: null,
        user_id: null,
        discount_id: null,
        views: null,
        recommend: null,
    }
})

const show = async (id: any) => {
    merchantForm.merchant = await http.request({
        method: 'get',
        url: `merchant/${id}`
    })
}


const uploadSuccess = (val) => {
    console.log("上传成功的回调，父级")
    console.log(val)
}
const submitEvent = async () => {

    await http.request({
        url: `merchant/${id}`,
        method: "put",
        data: merchantForm.merchant
    })
}

const resetEvent = () => {

}

const goBack = () => {
    router.go(-1)
}
</script>

<style scoped>
.videoPlayer {
    height: 300px;
    width: 300px;
    margin: 0 auto;
}
</style>